<!-- Toast.vue -->
<template>
    <Transition>
        <div v-show="SignIn.show">
            <div class="sign-in d-flex justify-center align-center">
                <div class="box d-flex flex-column align-center">
                    <img :src="sigin" alt="" class="j-img" />
                    <p class="c-title-2 c-bold d-tt">{{ $t("message.CheckIn.f") }}</p>
                    <p class="w_label">
                        <!-- {{getLongs}} -->
                        <!-- +{{ SignIn.energy }}{{ $t("message.clocked.e") }},
                        {{ $t("message.clocked.b") }} -->
                    </p>
                    <span class="btn mt-4" @click="() => SignIn.close()">{{ $t("message.Global.Know") }}</span>
                </div>
            </div>
        </div>
    </Transition>
</template>
<script setup lang="ts">
import sigin from "@/assets/signIn.png";
import { SignIn } from "./index";
import i18n from "@/locals"
import { computed } from "vue";

// const getLongs = computed(()=>{
//     // return i18n.global.t("message.CheckIn.lx").replace("@", SignIn.energy + "");
//     return "hellowrod";
// });
</script>
<style scoped lang="less">
.sign-in {
    user-select: none;
    -webkit-user-drag: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;

    .box {
        width: 500px;
        height: 470px;
        background: #1D1F24;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .w_label {
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 40px;
        }

        .btn {
            min-width: 280px;
            text-align: center;
            color: black;
            padding: 10px 20px;
            border-radius: 4px;
            background-color: var(--main);
            margin-top: 40px;

            &:active {
                scale: 0.98;
            }
        }
    }
    background-color: rgba(0, 0, 0, 0.2);
}
.d-tt{
    font-size: 24px;
    margin-bottom: 12px;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
.j-img{
    width: 160px;
    height: 129px;
    object-fit: contain;
    margin-bottom: 50px;
}
</style>
